<template>
  <div class="bgc">
    <el-main class="main">

      <h1 align="center">教师账号注册</h1>
      <el-form label-width="100px">
        
        <el-row>
            <el-col :span="12">
                <el-form-item label="姓名">
                    <el-input type="text" placeholder="姓名" v-model="form.name"></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        
        <el-form-item label="身份证">
            <el-input type="text" placeholder="身份证" v-model="form.cardId"></el-input>
        </el-form-item>

        <el-form-item label="电话">
            <el-input type="text" placeholder="电话" v-model="form.phone"></el-input>
        </el-form-item>

        <el-form-item label="密码">
          <el-input 
            type="text"
            v-model="form.pwd"
            placeholder="请输入密码"
          />
        </el-form-item>

        <el-form-item label="个人简介">
          <el-input
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4}"
            placeholder="请输入内容"
            v-model="form.note"
          />
        </el-form-item>
      </el-form>

      <el-row style="padding:10px 0;">
        <el-col :span="20">
          <el-link type="primary" @click="$router.push('login')">
            已有账户?去登录
          </el-link>
        </el-col>

        <el-col :span="4">
          <el-link type="primary"
            @click="$router.push('/register')"
          >
           注册学生用户
          </el-link>
        </el-col>

      </el-row>

      <el-row>
        <el-col :offset="6" :span="12">
          <el-button type="success" @click="register" class="submitBtn">
            注册
          </el-button>
        </el-col>
      </el-row>


    </el-main>
  </div>
</template>

<script>
import { Register} from "api/api.js";
import major_list from "config/major.js"

export default {
  name: "Regitser",
  data() {
    return {
      form: {
        username: "",
        //email: "",
        pwd:"",
        //gender:"",
        phone:"",
        note:"",
        //work_unit:"",
        //school:"",
        //major:"",
        //hire_date:"",
        //first_date:"",
      },
      major_list
    };
  },
  methods: {
    register() {

      const form = this.form

      Register(form)
        .then((res) => {
          if (res.data.flag) {
            false
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
  mounted() {

  },
};
</script>

<style scoped>
.el-main{
  flex:none
}
.bgc{
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bgc::before {
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: fixed;
  background:url(~assets/background.jpg) center center no-repeat;
  background-size: cover;
  z-index: -1;
}

.main {
  width: 61.8%;
  max-width: 618px;
  max-height: 90vh;
  padding: 35px 10px;
  background-color: rgba(255, 255, 255, 0.8);
  border:1px solid rgba(67, 196, 255, 0.671);
  border-radius: 6.18px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
}

.submitBtn{
  width: 100%;
}
.el-radio-button{
  width: 50%;
}
</style>

<style>
#REGISTER_TYPE_BTN_GROUPS > .el-radio-button__inner{
  width: 100%;
}
::-webkit-scrollbar{
  width: 4px;
  background-color: rgba(128, 128, 128, 0.082);
}
::-webkit-scrollbar-thumb{
  border-radius: 10px;
  background-color: rgba(128, 128, 128, 0.226);
}
</style>
